<template>
  <div class="box">
    <hearder :navNumber="3"></hearder>
    <div class="box-title xt-text-hover-success xt-m-2 ">我的订单</div>

    <div class="box-title xt-text-danger xt-m-2" v-if="userOrder.length === 0">暂无订单。。。</div>

    <div class="xt-flex xt-justify-center" v-else>
        <table border="0" cellpadding="0" cellspacing="0">
            <thead class="xt-bg-secondary">
                <tr>
                    <th class="xt-p-1">手机号码</th>
                    <th class="xt-p-1">预约时间</th>
                    <th class="xt-p-1">摄影师姓名</th>
                    <th class="xt-p-1">摄影师等级</th>
                    <th class="xt-p-1">摄影师手机号</th>
                    <th class="xt-p-1">服装名称</th>
                    <th class="xt-p-1">结算价格</th>
                    <th class="xt-p-1">订单编号</th>
                    <th class="xt-p-1">拍摄时间</th>
                    <th class="xt-p-1">拍摄地点</th>
                    <th class="xt-p-1">订单状态</th>
                    <th class="xt-p-1">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="xt-bg-hover-secondary" v-for="(item, index) in userOrder" :key="index">
                    <th class="xt-p-1">{{ item.userTel }}</th>
                    <th class="xt-p-1">{{ formatDate(item.Oreservetime) }}</th>
                    <th class="xt-p-1">{{ item.sheyinshiName }}</th>
                    <th class="xt-p-1">{{ roleName(item.sheyinshiDj) }}</th>
                    <th class="xt-p-1">{{ item.sheyinshiTel }}</th>
                    <th class="xt-p-1">{{ item.ClothingName }}</th>
                    <th class="xt-p-1">{{ item.Omoney }}</th>
                    <th class="xt-p-1">{{ item.Orderid }}</th>
                    <th class="xt-p-1">{{ item.ShootingTime }}</th>
                    <th class="xt-p-1">{{ item.FilmCity }}</th>
                    <th class="xt-p-1">{{ orderState(item.OrderState) }}</th>
                    <th class="xt-p-1">
                        <button class="xt-p xt-cursor-pointer" @click="paymentShowStateFn(item)" v-if="item.OrderState === 1">立即支付</button>
                        <button @click="detailObjFn(item)" class="xt-p xt-ml-1 xt-cursor-pointer">详细信息</button>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="box-logOut xt-bg-secondary" @click="quitLogin()">退出登录</div>

    <!-- 支付 -->
    <div class="box-payment xt-flex-column xt-align-center xt-justify-center{ xt-bg-info xt-p-3" v-if="paymentShowState">
    扫码支付金额 {{ paymentPrice }} 元
        <div>
            <img class="box-payment-QRcode" :src="imgsrc"  />
        </div>
        <div class="xt-flex">
            <div @click="paymentFn()" class="xt-p-1 xt-bg-danger xt-cursor-pointer xt-bg-hover-info xt-m-1">支付</div>
            <div @click="paymentShowState = false" class="xt-p-1 xt-bg-secondary xt-cursor-pointer xt-bg-hover-info xt-m-1">取消</div>
        </div>
    </div>

    <!-- 详细信息 -->
    <div class="box-payment xt-bg-info xt-p-3" v-if="detailState">
        <div class="xt-p-1">客户手机号码: {{ detailObj.userTel }}</div>
        <div class="xt-p-1">客户姓名: {{ detailObj.userName}}</div>
        <div class="xt-p-1">预约时间: {{ formatDate(detailObj.Oreservetime)}}</div>
        <div class="xt-p-1">确定订单时间: {{ detailObj.Osuretime === '' ? detailObj.Osuretime:formatDate(detailObj.Osuretime) }}</div>
        <div class="xt-p-1">摄影师姓名: {{ detailObj.sheyinshiName}}</div>
        <div class="xt-p-1">摄影师等级: {{ roleName(detailObj.sheyinshiDj) }}</div>
        <div class="xt-p-1">摄影师手机号: {{ detailObj.sheyinshiTel}}</div>
        <div class="xt-p-1">服装名称: {{ detailObj.ClothingName}}</div>
        <div class="xt-p-1">结算价格: {{ detailObj.Omoney}}</div>
        <div class="xt-p-1">订单编号: {{ detailObj.Orderid}}</div>
        <div class="xt-p-1">拍摄时间: {{ detailObj.ShootingTime}}</div>
        <div class="xt-p-1">拍摄地点: {{ detailObj.FilmCity}}</div>
        <div class="xt-p-1">订单状态: {{ orderState(detailObj.OrderState)}}</div>

        <div class="xt-flex">
            <div @click="detailState = false" class="xt-p-1 xt-bg-secondary xt-cursor-pointer xt-bg-hover-info xt-m-1">关闭</div>
        </div>
    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import hearder from '../components/hearder.vue'
import Axios from 'axios';

@Component({
  components: {
    hearder
  },
})
export default class Home extends Vue{
    userOrder:any = [];
    imgsrc:any = require('../assets/img/QRcode.png');
    paymentShowState:boolean = false; // 支付模态框显示状态
    paymentPrice:string = ''; // 支付价格
    Oid:number = 0; // 订单id

    detailState:boolean = false; // 详情信息显示状态
    detailObj:any = {} // 详情

    created(){
        this.getUserOrder();
    }

    detailObjFn(item:any){
        this.detailState = true;
        this.detailObj = item;
    }

    paymentShowStateFn(obj:any){
        const { Oid, Omoney } = obj;
        this.Oid = Oid;
        this.paymentPrice = Omoney;
        this.paymentShowState = true;
    }

    // 支付
    paymentFn(){
        Axios.post('/order/update', { Oid : this.Oid })
        .then((res:any)=>{
        if(res.status === 200){
            alert(res.data.data);
            this.getUserOrder();
            this.paymentShowState = false;
            return;
        }
        return alert(res.data.data);
        })
    }

    // 获取用户订单信息
    getUserOrder(){
        const { userId } = JSON.parse(window.localStorage.cyxUser);
        Axios.get('/order/userOrder', {
            params:{
                userId
            },
        })
        .then((res:any)=>{
            console.log(res)
            if(res.data.code === 200){
                this.userOrder = res.data.data;
                
                return;
            }
            alert('数据查询异常，请稍后再试')
        })
    }

    // 等级名称
  roleName(type:number){
    let str = ''

    switch(type){
      case 1: str = '初级'; break;
      case 2: str = '中级'; break;
      case 3: str = '高级'; break;
    }
    return str;
  }

  // 预约单完成状态
  orderState(type:number){
    let str = ''

    switch(type){
      case 1: str = '预约中'; break;
      case 2: str = '已完成'; break;
    }
    return str;
  }

  /**
 * @param {数值类型} date
 */
  formatDate(date:any){
      date = new Date(date*1);
      var y  =  date.getFullYear();
      var m  =  date.getMonth()+1;
      var d  =  date.getDate();
      var h  =  date.getHours();
      var m1  =  date.getMinutes();
      var s  =  date.getSeconds();
      m  =  m<10?("0"+m):m;
      d  =  d<10?("0"+d):d;
      return y+"-"+m+"-"+d+" "+h+":"+m1+":"+s;
  }

  // 退出登录
  quitLogin(){
      localStorage.removeItem("cyxUser");
      (this as any).$router.replace("/login");
  }
}
</script> 

<style scoped lang="less">
.box{
    &-title{
        font-size: 20px;
        text-align: center;
    }
    &-logOut{
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        position: fixed;
        right: 0;
        bottom: 0;
    }
    &-payment{
      width: 400px;
      min-height: 400px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      border: 2px solid #117a8b;
      background: #ffffff;

      &-QRcode{
          width: 300px;
          height: 300px;
      }
    }
}
</style>
